<template>
  <div class="bg">
    <div class="flexbox">
      <div class="boxLeft">
        <!-- <div class="icoLeft">铅笔图标</div> -->
        <vue-icon iconClass="zuoye1" class="icoLeft" size="2vw"></vue-icon>
        <span>作业</span>
      </div>
      <div class="boxCon">
        <div class="conTop">
          <div class="conToptitle">作业详情</div>
          <!-- <a class="btnBack" @click="back">返回按鈕</a> -->
          <vue-icon iconClass="fanhui" class="btnBack" @click="back" size="2vw"></vue-icon>
        </div>
        <div class="content">
          <div
            class="sonContent"
            v-for="(item, index) in workList"
            :key="index"
            @mouseenter.native="enter(index)"
            @mouseleave.native="leave(index)"
          >
            <div class="sonbox" id="oneBox">
              <div class="sonBoxLeft" transition="one">
                <div>
                  <span class="workCount">{{ item.name }}</span>
                  <span class="deadLine"
                    >截止时间：
                    <span style="color: black">{{ item.DDL }}</span>
                  </span>
                </div>
                <div class="workContent">
                  <span>内容:</span>
                  <div class="hidden">{{ item.message }}</div>
                </div>
              </div>
              <div class="sonBoxRight">
                <vue-icon iconClass="bianjisekuai" class="icon-right"></vue-icon>
                <vue-icon iconClass="shanchu" class="icon-right"></vue-icon>
              </div>
            </div>
            <div class="hover" v-if="isShow[index]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'jobDetail',
  methods: {
    back() {
      this.$router.push('/');
    },
    enter(index) {
      this.isShow[index] = true;
      console.log('鼠标移入');
    },
    leave(index) {
      this.isShow[index] = false;
      console.log('鼠标移出');
    },
  },
  data() {
    return {
      isShow: [false, false, false, false],
      workList: [],
    };
  },
  created() {
    let direction = '';
    // 判断Vuex里是否有值
    if (this.$store.state.modulesUserInfo) {
      direction = this.$store.state.modulesUserInfo.direction;
    } else {
      const id = localStorage.getItem('localID');
      // const id = 2;
      this.$api.historylistApi.getStuWork(id).then((res) => {
        direction = res[0].direction;
      });
    }
    this.$api.historylistApi.getworkList().then((res) => {
      console.log(res);
      for (let i = 0; i < res.length; i++) {
        if (res[i].direction === direction) {
          this.workList.push(res[i]);
        }
      }
      //修改日期格式
      for (let i = 0; i < this.workList.length; i++) {
        const dayString = this.workList[i].DDL;
        // 先将日期分成年月日和后面的时分秒两部分
        const day_time = dayString.split('T');
        // 将年月日分隔开
        // const year_month_day = day_time[0].split("-");
        // 将秒后面的数隔开
        const hour = day_time[1].split('.');
        // console.log(hour);
        this.workList[i].DDL = day_time[0] + '  ' + hour[0];
      }
      console.log(this.workList);
    });
  },
};
</script>

<style>
.hover-leave,
.hover-enerter-to {
  opacity: 1;
}
.hover-leave-active,
.hover-enter-active {
  transition: all 2s;
}
.hover-leave-to,
.hover-enter {
  opacity: 0;
}
</style>
<style scoped lang="less">
.bg {
  position: relative;
  .body-size();
  background-image: url('../../assets/img/public/bg.jpg');
  .bg-maker();
}

.flexbox {
  display: flex;
}

.boxLeft {
  width: 18.7vw;
  height: 100vh;
  text-align: center;
  position: relative;
  padding-top: 3.2vh;
  span {
    font-size: 2vw;
  }
  div {
    position: absolute;
    top: 4vh;
    left: 2vw;
  }
  .icoLeft {
    position: relative;
    left: -2vw;
  }
}
#oneBox {
  margin-top: 1vh;
}
.boxCon {
  height: 91vh;
  width: 81.3vw;
  display: flex;
  flex-direction: column;
  margin-top: 3.2vh;
  .conTop {
    height: 14vh;
    padding-right: 2vw;
    display: flex;
    justify-content: space-between;
    .conToptitle {
      width: 13.2vw;
      height: 6.4vh;
      align-self: center;
      line-height: 6.4vh;
      background-color: rgba(192, 208, 233, 0.7);
      border-radius: 1vw;
      text-align: center;
      font-size: 1.5vw;
    }
    .btnBack {
      cursor: pointer;
    }
  }
  .content {
    height: 88vh;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    overflow-y: scroll;
    .sonContent {
      width: 100%;
      height: 34vh;
      margin-top: 3vh;
      margin-bottom: 5vh;
      display: flex;
      align-items: center;
      &:hover .sonbox,
      &:hover .hover {
        transform: translate(0, -0.5vh);
      }
      .sonbox {
        width: 93%;
        height: 100%;
        margin-right: 2vw;
        display: flex;
        align-items: center;
        border-radius: 1.5vw;
        background: rgba(221, 229, 240, 0.7);
        transition: transform 0.5s ease;
        .sonBoxLeft {
          width: 94%;
          height: 100%;
          .workCount {
            font-size: 1.2vw;
            line-height: 5vh;
            padding-left: 1.5vw;
          }
          .deadLine {
            color: #9a9da4;
            padding-left: 1.5vw;
          }
          .workContent {
            padding-left: 1.5vw;
            position: relative;
            top: -1vh;
            span {
              color: #9a9da4;
            }
            .hidden {
              overflow-y: scroll;
              // background: black;
              width: 98%;
              height: 26vh;
            }
          }
        }
        .sonBoxRight {
          width: 6%;
          height: 100%;
          // background: orange;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .icon-right {
            margin-bottom: 4vh;
            margin-top: 4vh;
          }
        }
      }
      .hover {
        height: 36%;
        width: 0.8%;
        background-color: white;
        border-radius: 1vw;
        transition: transform 0.5s ease;
      }
    }
  }
}
</style>
